<template>
  <!-- 包裹容器 -->
  <div class="wrapper" ref="wrapper">
    <!-- 内容 这里可以添加一个类 自定义宽高 -->
    <slot></slot>
  </div>
</template>

<script>
//引入better-srcoll插件
import BScroll from "better-scroll";
export default {
  //这里没有同nextTick 不确定是否渲染完  没有就在次调用 reshft 重新获取高度
  props: {
    //子组件接收父组件传递过来的函数 进行调用
    handleToScroll: {
      type: Function,
      default: function () {},
    },
    handleToTouchEnd: {
      type: Function,
      default: function () {},
    },
  },
  mounted() {
    var scroll = new BScroll(this.$refs.wrapper, {
      probeType: 1,
      tap: true,
    });
    this.scroll = scroll;
    // 事件的调用
    scroll.on("scroll", (pos) => {
      this.handleToScroll(pos);
    });

    scroll.on("touchEnd", (pos) => {
      this.handleToTouchEnd(pos);
    });
  },
  methods: {
    // 城市的跳转
    toScrollTop(y) {
      this.scroll.scrollTop(0, y);
    },
  },
};
</script>

<style scoped>
/* 高度和他的父级一样高 */
.wrapper {
  height: 100%;
}
</style>